<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseAvatar
      src="/img/avatars/1.svg"
      shape="full"
      size="xs"
      badge-src="/img/icons/flags/united-states-of-america.svg"
    />

    <BaseAvatar
      src="/img/avatars/5.svg"
      shape="full"
      badge-src="/img/icons/flags/united-states-of-america.svg"
    />

    <BaseAvatar
      src="/img/avatars/4.svg"
      shape="full"
      size="md"
      badge-src="/img/icons/flags/united-states-of-america.svg"
    />

    <BaseAvatar
      src="/img/avatars/3.svg"
      shape="full"
      size="lg"
      badge-src="/img/icons/flags/united-states-of-america.svg"
    />

    <BaseAvatar
      shape="full"
      src="/img/avatars/8.svg"
      size="xl"
      badge-src="/img/icons/flags/united-states-of-america.svg"
    />

    <BaseAvatar
      shape="full"
      src="/img/avatars/16.svg"
      size="2xl"
      badge-src="/img/icons/flags/united-states-of-america.svg"
    />

    <BaseAvatar
      shape="full"
      src="/img/avatars/2.svg"
      size="3xl"
      badge-src="/img/icons/flags/united-states-of-america.svg"
    />

    <BaseAvatar
      shape="full"
      src="/img/avatars/20.svg"
      size="4xl"
      badge-src="/img/icons/flags/united-states-of-america.svg"
    />
  </div>
</template>
